<template>
	<view class="">
		<xxm-child @add="onAdd" @change="onChange"></xxm-child>
		<view class="box" :style="{background:color}">{{color}}</view>
		<view class="content">{{content}}</view>
	</view>
</template>

<script setup>
import {ref} from "vue"
const num = ref(0)
const color = ref('#ccc');
const content = ref("哈哇哈")

const onAdd = function(e){
	console.log(e);
	num.value = e;
	color.value ="#"+String(e).substring(3,6)
}

const onChange = function(e){
	console.log(e);
	content.value = e;
}
</script>

<style lang="scss" scoped>
.box{
	margin-top: 25px;
	color: #fff;
	width: 200px;
	height: 200px;
	text-align: center;
	line-height: 200px;
}

.content{
	margin: 15px 5px;
	padding: 10px 5px;
	border: 1px solid rgb(190, 187, 187);
    border-radius: 5px;
	

}
</style>
